<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1,user-scalable=0"
        />
        <style lang="">
            /* rest */
            html,
            body,
            div,
            span,
            applet,
            object,
            iframe,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            blockquote,
            pre,
            a,
            abbr,
            acronym,
            address,
            big,
            cite,
            code,
            del,
            dfn,
            em,
            font,
            img,
            ins,
            kbd,
            q,
            s,
            samp,
            small,
            strike,
            strong,
            sub,
            sup,
            tt,
            var,
            dl,
            dt,
            dd,
            ol,
            ul,
            li,
            fieldset,
            form,
            label,
            legend,
            table,
            caption,
            tbody,
            tfoot,
            thead,
            tr,
            th,
            td {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                font-weight: inherit;
                font-style: inherit;
                font-size: 100%;
                font-family: inherit;
                vertical-align: baseline;
            }
            :focus {
                outline: 0;
            }
            table {
                border-collapse: separate;
                border-spacing: 0;
            }
            caption,
            th,
            td {
                text-align: left;
                font-weight: normal;
            }
            a img,
            iframe {
                border: none;
            }
            ol,
            ul {
                list-style: none;
            }
            input,
            textarea,
            select,
            button {
                font-size: 100%;
                font-family: inherit;
            }
            select {
                margin: inherit;
            }
            /* Fixes incorrect placement of numbers in ol’s in IE6/7 */
            ol {
                margin-left: 2em;
            }
            /* == clearfix == */
            .clearfix:after {
                content: " ";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .clearfix {
                display: inline-block;
            }
            * html .clearfix {
                height: 1%;
            }
            .clearfix {
                display: block;
            }
        </style>
        <style>
            html,body{
                height: 100%;
            }
            .ul {
                padding: 20px;
            }
            .li {
                display: block;
                padding: 0 15px;
            }
            .cells{
                display: flex;
                justify-content: center;
                align-items:stretch;
            }
            .cells .point{
                flex: 0 0 auto;
                position: relative;
                padding: 0 15px;
            }
            .li:last-of-type .line{
                display: none;
            }
            .cells .line{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 1px;
                height: 100%;
                background: blue;
            }
            .cells .point::before{
                display: block;
                content: "";
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: blue;
                position: absolute;
                top: -2px;
                left: 50%;
                transform: translateX(-50%);
            }
            .cells .point::after{
                display: block;
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: transparent;
                border: 1px solid blue;
                position: absolute;
                top: -5px;
                left: 50%;
                transform: translateX(-50%);
            }
            .cells .text{
                font-size: 12px;
                height: 50px;
                padding-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <ul class="ul">
            <li class="li">
                <div class="cells">
                    <div class="point"><span class="line"></span></div>
                    <div class="text">2019-09-01 10：10：10</div>
                </div>
            </li>
            <li class="li">
                <div class="cells">
                    <div class="point"><span class="line"></span></div>
                    <div class="text">2019-09-01 10：10：10</div>
                </div>
            </li>
            <li class="li">
                <div class="cells">
                    <div class="point"><span class="line"></span></div>
                    <div class="text">2019-09-01 10：10：10</div>
                </div>
            </li>
        </ul>
    </body>
</html>
